<template>
	<div class="perinfo">
		<div class="perinfos">
			<div class="labelheader">个人信息</div>
			<div class="info">
				<el-form label-position="top" label-width="100px" :model="userinfo" style="width: 50%">
					<el-form-item label="用户名：">
						<el-input v-model="userinfo.name" :disabled="state.value" />
						<el-button v-if="state.value" style="margin-top: 2%;" type="primary"
							@click="gonameset()">修改用户名</el-button>
						<div v-else>
							<el-button style="margin-top: 2%;" type="primary" @click="gonameup()">确定</el-button>
							<el-button style="margin-top: 2%;" type="primary" @click="gonameun()">取消</el-button>
						</div>
					</el-form-item>
					<el-form-item label="手机号：" style="margin-top: 2%">
						<el-input v-model="userinfo.Phone" disabled /><el-button style="margin-top: 2%;" type="primary"
							@click="goPhoneset()">绑定手机号</el-button>
					</el-form-item>
					<el-form-item label="工作证号：" style="margin-top: 2%">
						<el-input v-model="userinfo.workID" disabled />
					</el-form-item>
				</el-form>
			</div>
			<div class="labelheader" style="margin-top: 3%">任务记录</div>
			<el-table :data="
                   publists.slice(
                     (queryPage.page - 1) * queryPage.pagesize,
                     queryPage.page * queryPage.pagesize
                   )
                 " style="margin-top: 3%; width: 100%; height: 70%" :header-cell-style="{
                   background: '#F5F7FA',
                   color: '#333333',
                   height: '27pt',
                 }" border empty-text="暂无近三天的任务记录">
				<el-table-column prop="ID" label="事故编号" align="center" />
				<el-table-column prop="accidename" label="事故名称" align="center" width="200px" />
				<el-table-column prop="acctype" label="事故类型" align="center">
					<template #default="{ row }">
						{{ acctype[row.acctype] }}
					</template>
				</el-table-column>
				<el-table-column prop="accidevents" label="事故日期" align="center" />
				<el-table-column prop="state" label="处理状态" align="center">
					<template #default="{ row }">
						{{ statusDict[row.state] }}
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-block" style="margin-top: 1.5%">
				<span style="margin-right: 1%; color: #a7a7a7; font-size: 11px">共计{{ publists.length }}条</span>
				<el-config-provider>
					<el-pagination v-model:current-page="queryPage.page" v-model:page-size="queryPage.pagesize"
						:page-sizes="[5, 10, 15, 20]" :small="true" layout="sizes, prev,pager,next,jumper"
						prev-text="上一页" next-text="下一页" :total="publists.length" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</el-config-provider>
			</div>
			<el-button style="margin-top: 2%;" type="primary" @click="exit()">退出登录</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive } from "vue";
	import { D_setup } from "../../../api/d_user/setup";
	import { D_updateUserName, Teampublis } from "../../../api/d_user/setup";
	import { useAuthStore } from "../../../store/auth";
	const loginuser = useAuthStore();


	const userinfo = ref({
		name: "",
		workID: "",
		Phone: "",
	});

	const state = reactive({
		value: true,
	});

	const publists = reactive([
		//   ID: "", //事故编号
		//   accidename: "", //事故名称
		//   acctype: "", //事故类型
		//   Accidevents: "", //事故日期
		//   accidenttion: "", //事故地点
		//   state："",  //处理状态
	]);


	const queryPage = reactive({
		page: 1,
		pagesize: 5,
	});

	const acctype = {
		0: "轻微事故",
		1: "小型事故",
		2: "一般事故",
		3: "大型事故",
		4: "重大事故",
	};

	const statusDict = {
		0: "未分配",
		1: "已完成",
		2: "执行中",
		3: "执行完成",
	};


	async function getDate() {
		const record = await D_setup(loginuser.user.username);
		userinfo.value = record.data;

		if (!loginuser || !loginuser.user) {
			return;
		} else {
			const records = await Teampublis(loginuser.user.username);
			publists.splice(0, publists.length);
			publists.push(
				...records.data.map((record) => {
					if (record.accidevents) {
						let eventDate = new Date(record.accidevents);
						eventDate.setDate(eventDate.getDate() + 1);
						record.accidevents = eventDate.toISOString().substring(0, 10);
					}
					return record;
				})
			);
		}
	}

	const handleSizeChange = (val) => {
		queryPage.pagesize = val;
		getDate();
	};
	const handleCurrentChange = (val) => {
		queryPage.page = val;
	};

	function exit() {
		loginuser.logout();
	}

	function gonameset() {
		state.value = !state.value;
	}
	async function gonameup() {
		await D_updateUserName(userinfo.value.name, loginuser.user.username);
		loginuser.user.name = userinfo.value.name;
		state.value = !state.value;
	}

	function gonameun() {
		userinfo.value.name = loginuser.user.name;
		state.value = !state.value;
	}

	function goPhoneset() {
		uni.navigateTo({
			url: '/pages/o_user/setup/modifyphone'
		});
	}

	onMounted(() => {
		getDate();
	});
</script>

<style scoped lang="scss">
	.perinfo {
		width: 100%;
		height: 100%;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.perinfos {
		margin-top: 1.5%;
		width: 98%;
		height: 96%;
	}

	.leftperinfo {
		width: 50%;
		height: 100%;
		// background-color: rgb(255, 215, 215);
	}

	.labelheader {
		font-size: 24px;
		color: rgb(0, 92, 175);
		background-color: RGB(210, 240, 244);
		width: 45%;
		height: 6%;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rightsetup {
		width: 50%;
		height: 100%;
		// background-color: rgb(255, 215, 215);
		display: flex;
		flex-direction: column;
	}

	.info {
		margin-top: 3%;
	}

	.upload-container {
		width: 200px;
		height: 200px;
		border: 2px dashed #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pagination-block {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uploader-icon {
		font-size: 50px;
		/* 调整图标大小 */
		color: aqua !important;
	}
</style>